import { ProFormInstance } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, { ActionType } from '@ant-design/pro-table';
import React, { useEffect, useRef, useState } from 'react';
import { Link } from 'umi';

export default () => {
  const [datayy, setDatayy] = useState();
  const ref = useRef<ProFormInstance>();
  const actionRef = useRef<ActionType>();
  const columns = [
    {
      title: '序号',
      key: 'seq',
      dataIndex: 'seq',
      hideInSearch: true,
      align: 'center',
      // render: (value: any, record: any, index: any) => {
      //   return <span>{index + 1}</span>;
      // },
    },
    {
      title: '暂存备注',
      key: '备注',
      dataIndex: '备注',
      hideInSearch: true,
      // align: "center",
      // render: (text: any) => <div >{text}</div>,
    },
    {
      title: '暂存时间',
      key: '暂存时间',
      dataIndex: '暂存时间',
      align: 'center',
      valueType: 'date',
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      align: 'center',
      render: (_: any, record: any) => [
        <Link
          to={`${record?.地址}`}
          key="view"
          onClick={() => {
            // **此操作及其不安全** 待改
            localStorage.setItem('datajson', '');
            localStorage.setItem('datajson', record?.data);
          }}
        >
          查看
        </Link>,
      ],
    },
  ];

  const data = [
    {
      seq: 1,
      备注: '标准的暂存',
      暂存时间: '2022-06-27',
      地址: '/LabAchievements/ScientificResearch/Standard/EditStandard/new',
      data: JSON.stringify({
        year: '2020',
        // standardName: '阿松大',
        standardTime: '2022-06-27',
        standardType: '阿松大',
        standardId: '阿松大',
        publisher: '阿松大',
        researchDire: '阿松大',
        labels: [1],
        id: 'new',
        userCommonRelations: [
          {
            realName: '顾军华',
            username: '1988037',
            technicalGrade: '正高级',
            technicalName: '教授',
            userType: '固定人员',
            userRank: 1,
            completeState: '独立完成',
            userIdentify: '第一作者',
          },
        ],
      }),
    },
    {
      seq: 2,
      备注: '年度代表性成果的录入暂存',
      暂存时间: '2022-06-25',
      地址: '/LabAchievements/ScientificResearch/AnnualRepresentative',
      data: JSON.stringify({
        year: '2020',
        achieveName: '',
        achieveType: '阿松大',
        labels: [2],
        achieveInfo: '啊实打实打赏阿松大阿松大暗室逢灯给的发挥的风格豆腐干地方',
        id: 'new',
        userCommonRelations: [
          {
            realName: '韩旭',
            username: '2016016',
            technicalGrade: '正高级',
            technicalName: '教授',
            userType: '固定人员',
            userRank: 1,
            completeState: '独立完成',
            userIdentify: '第一作者',
          },
        ],
      }),
    },
    {
      seq: 3,
      备注: '论文的录入暂存',
      暂存时间: '2022-06-23',
      地址: '/LabAchievements/ScientificResearch/Paper/EditPaper/new',
      data: '',
    },
  ];
  useEffect(() => {
    setDatayy(data);
  }, []);
  return (
    <PageContainer>
      {/* 暂存接口 四个
        1、获取暂存列表信息：暂存时间、备注
        2、根绝暂存id获取暂存详情，并回填进去
        3、提交暂存接口，增加弹出窗，要求用户填写备注等信息
        3、删除暂存接口，后端实现，
            增加暂存id字段，当暂存id有时，点击提交，会删除该暂存记录，并保存
            当暂存id没有时，就普通提交接口
        测试在标准中
      */}
      <ProTable
        bordered
        headerTitle={'暂存历史列表'}
        columns={columns}
        dataSource={datayy}
        // search={false}
        rowKey="seq"
        pagination={{ pageSize: 10 }}
        onSubmit={(params: any) => {
          setDatayy(data.filter((d) => d.暂存时间 === params?.暂存时间));
        }}
        actionRef={actionRef}
        formRef={ref}
        onReset={() => {
          ref.current?.resetFields();
          setDatayy(data);
        }}
      />
    </PageContainer>
  );
};
